<template>
  <div class="work-direction">
    <TitleHeader name="从事职业" />
    <div class="search">
      <div class="title">查询职业</div>
      <el-input
        v-model="matchName"
        placeholder="请输入职业关键词"
        class="custom-input"
      />
    </div>
    <div
      v-if="jobList.length > 0"
      class="job-list"
      @scroll="debouncedListHandleScroll"
    >
      <JobCard :info="item" v-for="(item, index) in jobList" :key="index" />
    </div>
    <div v-else>
      <Empty />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { searchJobByProfession } from '@/api/majorSearch';
import TitleHeader from './TitleHeader.vue';
import JobCard from './jobCard.vue';
import Empty from '@/components/empty.vue';

import antiShake from '@/utils/antiShake.js';

const props = defineProps({
  positionTagId: {
    type: String,
    default: '',
  },
});
const matchName = ref('');
const jobList = ref([]);
const pageNo = ref(1);
const pageSums = ref(100);
const searchJobByProfessionFn = async () => {
  const params = {
    matchName: matchName.value, // 专业名称
    pageSize: 10, // 每页显示的数量
    pageNo: pageNo.value, // 当前页码
    positionTagId: props.positionTagId,
  };
  const res = await searchJobByProfession(params);
  if (res.code == 200) {
    pageSums.value = res.pageparam.pages;
    if (pageNo.value == 1) {
      jobList.value = res.data;
    } else {
      jobList.value = [...jobList.value, ...res.data];
    }
    pageNo.value++;
  }
};

const handleScroll = () => {
  const listElement = document.querySelector('.job-list');
  if (listElement) {
    const { scrollTop, scrollHeight, clientHeight } = listElement;
    if (scrollTop + clientHeight >= scrollHeight - 10) {
      // 这里可以添加加载更多数据的逻辑
      if (pageNo.value <= pageSums.value) {
        searchJobByProfessionFn();
      }
    }
  }
};
const debouncedListHandleScroll = antiShake(handleScroll, 300);

watch(
  () => props.positionTagId, // 监听 props.positionTagId 的变化
  (nawVal) => {
    searchJobByProfessionFn();
  },
  { deep: true }
);

watch(
  () => matchName.value,
  antiShake((nawVal) => {
    pageNo.value = 1;
    pageSums.value = 100;
    searchJobByProfessionFn();
  }, 500), // 500毫秒防抖
  { deep: true }
);

onMounted(() => {
  searchJobByProfessionFn();
});
</script>

<style lang="scss" scoped>
.work-direction {
  width: 100%;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
  .search {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24px;
    color: #555555;
    display: flex;
    align-items: center;
    :deep(.el-input__wrapper) {
      background: #fafcfe;
      box-shadow: none;
    }
    :deep(.el-input__inner) {
      background: #fafcfe;
      font-size: 24px;
    }
    .custom-input {
      width: 862px;
      height: 51px;
      background: #fafcfe;
      border-radius: 6px;
      border: 2px solid #e4edf8;
      margin-left: 16px;
    }
  }
  .job-list {
    margin-top: 38px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    height: calc(100% - 118px);
    overflow-y: scroll;
  }
}
</style>
